<template>
  <div class="box">
    <div id="pie"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"//由于原文件没有默认导出
import { onMounted, ref } from "vue";

// const pie = ref();
// console.log(pie);
// 基于准备好的dom，初始化echarts实例
onMounted(() => {
  var myChart = echarts.init(document.getElementById('pie')!);

  const option = {
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        data: [
          { value: 235, name: '视频广告' },
          { value: 274, name: '联盟广告' },
          { value: 310, name: '邮件营销' },
          { value: 335, name: '直接访问' },
          { value: 400, name: '搜索引擎' }
        ],
        roseType: 'angle',
        itemStyle: {
          normal: {
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }


  // 绘制图表
  myChart.setOption(option)

})

</script>

<style scoped lang="scss">
#pie {
  width: 500px;
  height: 400px;
}
</style>